<template>
  <el-main>
    <el-form>
        <el-select v-model="proviceId" placeholder="一级分类" @change="changPrivice">
          <el-option
              v-for="item in proviceList"
              :key="item.name"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="cityId" placeholder="二级分类" @change="changCity">
          <el-option
              v-for="item in cityList"
              :key="item.name"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      <el-select v-model="areaId" placeholder="三级分类" clear>
        <el-option
            v-for="item in areaList"
            :key="item.name"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
    </el-form>
    <el-table
        :data="tableData"
        border>
      <el-table-column
          fixed
          prop="title"
          label="名称"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="分类"
          width="150">
        <template slot-scope="scope">
          {{scope.row.category1.name}}/{{scope.row.category2.name}}/{{scope.row.category3.name}}
        </template>
      </el-table-column>
      <el-table-column
          prop="brand.name"
          label="品牌"
          width="120">
      </el-table-column>
      <el-table-column
          label="规格"
          width="120">
        <template slot-scope="scope">
          <span v-for="(key,value) in JSON.parse(scope.row.spuDetail.genericSpec)">{{key}}/</span>
        </template>
      </el-table-column>
      <el-table-column
          label="规格"
          width="120">
        <template slot-scope="scope">
          <span v-for="(value,key) in JSON.parse(scope.row.spuDetail.specialSpec)">
            <span v-for="item in value">{{item}}/</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="stock"
          label="库存"
          width="120">
      </el-table-column>
      <el-table-column
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="detail(scope.row.id)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-main>
</template>

<script>
export default {
  name: "Prouct",
  data() {
    return {
      tableData: [],
      treeData: [],
      proviceId: null,
      proviceList: [],
      cityList: [],
      cityId: null,
      areaList: [],
      areaId: null
    };
  },
  methods: {

    changPrivice() {
      //let cityList = this.proviceList.filter(item => item.parentId == this.proviceId);
      this.cityList = this.proviceList.filter(item => item.id == this.proviceId)[0].categoryList;
      this.cityId = null;
      this.areaId = null;
      console.log(this.proviceId,this.cityList);
    },
    changCity() {
      let cityList =this.proviceList.filter(item => item.id == this.proviceId)[0].categoryList;
      this.areaList = cityList.filter(item => item.id == this.cityId)[0].categoryList;
      this.areaId = null;
    },
    detail(id) {
      this.$router.push('/product/detail/'+id)
    }

  },
  mounted() {
    this.axios.get('product/spu/page').then(res=>{
      this.tableData = res.data.data.list;
    }).catch(err=>{

    })
    this.axios.get('product/category/getTreeList').then(res=>{
      this.proviceList = res.data.data;
    }).catch(err=>{

    })
  }
};
</script>

<style scoped>
  div {

  }
</style>